<script setup>
import { onBeforeMount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
import CompGQAnniu from '@renderer/components/CompGQAnniu.vue'
import CompGuanqia from '@renderer/components/CompGuanqia.vue'
import CompJieguo from '@renderer/components/CompJieguo.vue'
import CompZhengshu from '@renderer/components/CompZhengshu.vue'
// import { ipcRenderer } from 'electron'

// 当前关卡的数据
const gkData = ref([])
// 关卡按钮数组
const guanqias = ref([
  { id: 'guanqia01', no: 0, wenzi: '第一关', open: true },
  { id: 'guanqia02', no: 1, wenzi: '第二关', open: false },
  { id: 'guanqia03', no: 2, wenzi: '第三关', open: false },
  { id: 'guanqia04', no: 3, wenzi: '第四关', open: false },
  { id: 'guanqia05', no: 4, wenzi: '第五关', open: false }
])
// 获取音效
const successAudio = ref(null)
const faileAudio = ref(null)
// 第？关
const guanid = ref(0)
// 显示答题界面
const showGuanqia = ref(false)
// 显示成绩界面
const showChengji = ref(false)
// 成绩界面标题
const chengjiTitle = ref('')
// 成绩界面标题样式
const titleStyleClass = ref('')
// 成绩界面评语
const chengjiPingyu = ref('')
// 显示“再试一次”按钮
const showRetry = ref(false)
// 显示“打印荣誉证书”按钮
const showDayin = ref(false)
// 显示证书模块
const showZhengshu = ref(false)
// 得分
const scoreGot = ref(0)
// 获取证书模块
const zhengshu_con = ref(null)
// let guanid = 0
// 答题数据服务器的端口
const server_ip = 'localhost'
const server_port = 3000
function loadData() {
  axios.get(`http://${server_ip}:${server_port}/guanqia/${guanid.value}`).then((res) => {
    gkData.value = res.data
  })
}
function openDati(item) {
  if (item.no == guanid.value) {
    showGuanqia.value = true
  }
}
function reopenDati() {
  showGuanqia.value = false
  loadData()
  showChengji.value = false
  showGuanqia.value = true
}
function closeDati() {
  showGuanqia.value = false
}
function closeChengji() {
  showChengji.value = false
}
// 设置分数并显示
function showResult(event) {
  scoreGot.value = event
  showChengji.value = true
  // showGuanqia.value = false
}
function enableNewGuanqia(event) {
  successAudio.value.play()
  showResult(event)
  chengjiTitle.value = '挑战成功'
  titleStyleClass.value = 'style_success'
  chengjiPingyu.value = '你太棒了'
  showRetry.value = false
  showDayin.value = false
  guanid.value++
  guanqias.value[guanid.value].open = true
}
function successAllGuanqia(event) {
  successAudio.value.play()
  showResult(event)
  chengjiTitle.value = '闯关成功'
  titleStyleClass.value = 'style_success'
  chengjiPingyu.value = '你太棒了'
  showRetry.value = false
  showDayin.value = true
  guanid.value++
  if (guanid.value >= guanqias.value.length) {
    guanid.value = 0
    for (let i = 0; i < guanqias.value.length; i++) {
      guanqias.value[i].open = false
      guanqias.value[0].open = true
    }
  }

  // guanqias.value[guanid.value].open = true
}
function chongxinDati(event) {
  faileAudio.value.play()
  showResult(event)
  chengjiTitle.value = '挑战失败'
  titleStyleClass.value = 'style_failure'
  chengjiPingyu.value = '再接再厉哦'
  showRetry.value = true
  showDayin.value = false
}
function dayinZhengshu() {
  showZhengshu.value = true
}
function hideZhengshu(){
  showZhengshu.value = false
}
// 获取证书模块的区域，发给主进程以截屏
const bounds = ref({})
function captureZSCompo(){
  bounds.value = zhengshu_con.value.getBoundingClientRect()
  console.log('capture-zhengshu', bounds.value)
  window.main2render.send('capture-zhengshu', [JSON.stringify(bounds.value), namefromzs.value])
  // ipcRenderer.send('capture-zhengshu', [JSON.stringify(bounds.value), namefromzs.value])
}
// 获取证书里输入的名字
const namefromzs = ref('')
function getZSpname(name){
  console.log('pname', name);
  namefromzs.value = name
}
onBeforeMount(() => {
  // 页面启动时发送事件
  // window.main2render.send('renderer-ready')
  loadData()
})
onMounted(() => {
  // 页面自适应
  if (document.documentElement.clientWidth / document.documentElement.clientHeight >= 1.7) {
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 9 + document.documentElement.clientHeight * 16) /
        2500 +
      'px'
  } else {
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 7 + document.documentElement.clientHeight * 12) /
        1800 +
      'px'
  }
  // bounds.value = document.getElementById('certificate').getBoundingClientRect()
  // if (zhengshu_con.value) {
  //   bounds.value = zhengshu_con.value.getBoundingClientRect()
  // }
  
  
  // console.log('capture-zhengshu', bounds.value)
  
})
watch(guanid, () => {
  loadData()
})
</script>

<template>
  <audio ref="successAudio">
    <source src="./assets/audios/chapter_right.wav" type="audio/wav" />
  </audio>
  <audio ref="faileAudio">
    <source src="./assets/audios/chapter_error.wav" type="audio/wav" />
  </audio>
  <div class="main_container">
    <div class="ans_container">
      <CompGQAnniu
        v-for="i in guanqias"
        :key="i.id"
        :wenzi="i.wenzi"
        :canuse="i.open"
        @open-dati="openDati(i)"
      ></CompGQAnniu>
    </div>
    <div v-if="showGuanqia" class="gq_container">
      <CompGuanqia
        :dataprop="gkData"
        :datalength="guanqias.length"
        :guanqiano="guanid"
        @close-guanqia="closeDati"
        @new-guanqia="enableNewGuanqia"
        @re-guanqia="chongxinDati"
        @all-guanqia="successAllGuanqia"
      ></CompGuanqia>
    </div>
    <div v-if="showChengji" class="res_container">
      <CompJieguo
        :title="chengjiTitle"
        :score="scoreGot"
        :pingyu="chengjiPingyu"
        :showretry="showRetry"
        :showdayin="showDayin"
        :titleclass="titleStyleClass"
        @chongxin-dati="reopenDati"
        @close-chengji="closeChengji"
        @chuangguan-chenggong="dayinZhengshu"
      ></CompJieguo>
    </div>
    <div v-if="showZhengshu" class="zs_container">
      <div id="certificate" ref="zhengshu_con" class="cert">
        <CompZhengshu @get-zsname="getZSpname"></CompZhengshu>
      </div>
      <div class="an_dayin" @click="captureZSCompo">打印荣誉证书</div>
      <div class="an_2main" @click="hideZhengshu">返回首页</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main_container {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1;
  .ans_container {
    width: 100vw;
    height: 20vw;
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 2;
  }
  .gq_container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }
  .res_container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
  }
  .zs_container {
    width: 100%;
    height: 100%;
    background-color: #ffffffdd;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 8;
    .cert {
      width: fit-content;
      height: 100%;
      border: 0px solid red;
    }
    .an_dayin {
      width: 15vw;
      height: 3.4vw;
      background-color: #ffd100;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      letter-spacing: 0.3rem;
      font-weight: bold;
      border-radius: 1rem;
      position: absolute;
      left: calc(50vw + 37vh);
      top: 66vh;
    }
    .an_2main {
      width: 15vw;
      height: 3.4vw;
      background-color: #c6cdda;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      letter-spacing: 0.3rem;
      font-weight: bold;
      border-radius: 1rem;
      position: absolute;
      left: calc(50vw + 37vh);
      top: 76vh;
    }
  }
}
</style>
